<template>
  <el-dialog :title="moduleDialog.title" :visible.sync="moduleDialog.show" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-row class="search-box">
      <el-col :span="24">
        <div class="search-div">
          <el-input style="width:200px;" v-model="name" placeholder="请输入名称"></el-input>
        </div>
        <div class="search-div">
          <span class="search-btn backorgin" @click="search">搜索</span>
        </div>
      </el-col>
    </el-row>
    <el-table :data="dataList" style="margin-top:20px;font-size:16px;" v-loading="loading">
      <el-table-column prop="id" label="ID" fixed="left" width="120"></el-table-column>
      <el-table-column prop="name" label="名称" width="120"></el-table-column>
      <el-table-column prop="version" label="版本" width="120"></el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <div style="color:#f00;" v-if="scope.row.status === 0">下线</div>
          <div style="color:#34abb5;" v-if="scope.row.status === 1">上线</div>
        </template>
      </el-table-column>
      <el-table-column prop="memo" label="描述" width="200">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.memo" placement="top">
            <span class="no-white" v-text="scope.row.memo"></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="URL" width="300">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.url" placement="top">
            <span class="no-white" v-text="scope.row.url"></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" fixed="right" width="80">
        <template slot-scope="scope">
          <span>
            <i
              @click="handleAdd(scope.row)"
              style="color:#34abb5;font-size:22px;cursor:pointer;margin-right:10px;"
              class="element-icons icon-icon02"
            ></i>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages-box">
      <div style="text-align:center;margin-top:20px;" v-if="total >= limit">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="start"
          :page-size="limit"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      dataList: [],
      start: 0,
      limit: 5,
      total: 0,
      name: ""
    };
  },
  props: ["moduleDialog"],
  methods: {
    handleClose() {
      this.moduleDialog.show = false;
    },
    resetData() {
        this.start = 0
        this.limit = 5
      this.name = ''
    },
    handleCurrentChange(val) {
      //页码切换
      this.start = val;
      this.render();
    },
    render() {
      this.loading = true;
      this.$axios
        .get("/tx/module/file/list", {
          start: this.start,
          limit: this.limit,
          name: this.name,
          status: this.moduleDialog.status
        })
        .then(res => {
          if (res.code === 10200) {
            this.dataList = res.data.list;
            this.total = res.data.count;
          }
          setTimeout(() => {
            this.loading = false;
          }, 200);
        });
    },
    search() {
      //查询
      this.start = 0;
      this.render();
    },
    handleAdd(row) {
        this.$emit('getChild', row.url, this.moduleDialog.type)
        this.moduleDialog.show = false
    }
  },
  computed: {
    changeDialog() {
      return this.moduleDialog.show;
    }
  },
  watch: {
    changeDialog(culval) {
      if (culval) {
        this.render();
      } else {
        this.resetData();
      }
    }
  }
};
</script>
<style>
</style>
